<template>
  <div class="category">
    <!-- 导航 -->
      <nav-bar class="homeNav">
        <template v-slot:NavBar_center>
          <slot>购物车({{cartLength}})</slot>
        </template>
      </nav-bar>

    <!-- 商品列表 -->
      <cate-item  ></cate-item>

    <!-- 底部汇总 -->

<!-- 没有图片是显示未添加购物车 -->
<div v-show="cartLength<1" class="empty">
  <img src="../../assets/images/category/购物车空.svg" alt="">
  <span>哎呀 您的购物车为空呢 </span>
  <span>来把喜欢的商品添加到购物车吧</span>
</div>


<main-tap-bar></main-tap-bar>
  </div>
</template>

<script>
// @ is an alias to /src
import mainTapBar from '../../components/TapBar/main.TapBar.vue';
import NavBar from "../../components/commom/navbar/NavBar.vue";
import CateItem from './childcomps/cateitem.vue';

import { mapGetters } from 'vuex'

  export default {
    name: 'category',
    components: {
      mainTapBar,
      NavBar,
      CateItem
    },
    computed:{
      //   cartLength(){
      //     // console.log(this.$store.getters)
      //   return this.$store.getters.cartLength
      // }
      ...mapGetters(['cartLength','cartlist'])
    },
    data(){
      return{
        // haveitem:true,

      }


    },
    mounted(){

    },
    updated(){
     
    }
  }
</script>

<style scoped>
.homeNav {
  background: #696969;
  color: #fff;
}
.empty{
  display: grid;
  margin: 0 auto;
  text-align: center;
}
.empty img{
  margin: 0 auto;
}
.empty span{
  line-height: 10vw;
  height: 10vw;
  font-weight: bold;
  font-size: 5vw;
}
</style>
